<template>
  <page-view class="order">
    <page-header title="订单" :show-back="true"></page-header>
    <div class="content-box">
      <list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        color="#0094ff"
      >
        <div v-for="(item, index) in orderList" :key="index">
          <ul class="order-desc">
            <li><span>订单编号：</span>{{ item.id }}</li>
            <li>
              <span>订单时间：</span
              >{{ formatDate(item.submit_time, "YYYY-MM-DD HH:mm:ss") }}
            </li>
            <li><span>订单总数：</span>{{ item.orderDetailList.length }}</li>
            <li><span>订单金额：</span>{{ item.order_money }}</li>
            <li><span>订单状态：</span>{{ item.order_status }}</li>
            <li>
              <steps :active="item.active">
                <step>未付款</step>
                <step>已付款</step>
                <step>已发货</step>
                <step>交易完成</step>
              </steps>
            </li>
            <li>
              <span>订单列表</span>
            </li>
          </ul>
          <ul class="order-item-list">
            <li v-for="(item2, index2) in item.orderDetailList" :key="index2">
              <div class="left">
                <span>{{ index2 + 1 }}</span>
                {{ item2.foodInfo.food_name }} x {{ item2.foodInfo.price }}
              </div>
              <div class="right">{{ item2.count }}</div>
            </li>
            <li class="left">
              <Button
                type="danger"
                size="mini"
                v-if="item.order_status === '未付款'"
              >
                取消订单
              </Button>
            </li>
            <li class="right">
              <Button size="mini" type="primary"> 评论 </Button>
              <Button size="mini" type="success" @click="payMoney">
                付款
              </Button>
            </li>
          </ul>
        </div>
      </list>
    </div>
  </page-view>
</template>

<script>
import formatDate from "@/filters/DateFilter";
import { reactive, ref, toRefs } from "vue";
import {
  Swipe,
  SwipeItem,
  Image as VanImage,
  List,
  PullRefresh,
  Loading,
  Step,
  Steps,
  Button,
} from "vant";
import Api from "../utils/api";
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
import FoodItem from "../components/FoodItem.vue";

export default {
  name: "Order",
  components: {
    Swipe,
    SwipeItem,
    VanImage,
    List,
    PullRefresh,
    Loading,
    FoodItem,
    Step,
    Steps,
    Button,
  },
  setup() {
    // 加载状态
    const loading = ref(false);
    // 是否加载完成
    const finished = ref(false);
    // 订单列表
    const orderInfo = reactive({
      pageCount: 0,
      pageEnd: 0,
      pageIndex: 1,
      pageStart: 1,
      totalCount: 0,
      orderList: [],
    });
    const { proxy } = getCurrentInstance();

    const getOrder = async (pageIndex = 1) => {
      loading.value = true;
      let res = await Api.order.getMyOrderListByPage({
        pageIndex: pageIndex,
      });
      orderInfo.pageCount = res.pageCount;
      orderInfo.pageEnd = res.pageEnd;
      orderInfo.pageIndex = res.pageIndex;
      orderInfo.pageStart = res.pageStart;
      orderInfo.totalCount = res.totalCount;
      //给订单数据写入action
      res.listData.forEach((item) => {
        if (item.order_status === "未付款") {
          item.active = 0;
        } else if (item.order_status === "已付款") {
          item.active = 1;
        } else if (item.order_status === "已发货") {
          item.active = 2;
        } else if (item.order_status === "已完成") {
          item.active = 3;
        }
      });
      //处理图片的网络地址
      res.listData.map(
        (item) => (item.food_img = proxy.BaseURL + item.food_img)
      );
      // 将第二次请求到的值push到foodList中做页面渲染
      orderInfo.orderList.push(...res.listData);
      //有请求就为false
      loading.value = false;
      //判断是否在最后一页
      finished.value = orderInfo.pageIndex >= orderInfo.pageCount;
    };

    //下拉刷新菜单
    const onLoad = () => {
      if (orderInfo.pageIndex < orderInfo.pageCount) {
        getOrder(Number(orderInfo.pageIndex) + 1);
      }
    };

    //付款事件
    const payMoney = async (id) => {
      Toast("正在付款...");
      let res = await Api.order.userPayOrder(id);
      let index = orederInfo.orderList.findIndex((item) => item.id === id);
      if (index != -1) {
        orderInfo.orderList[index].order_status = "已付款";
        orderInfo.orderList[index].active = 1;
      } else {
        Toast.error("付款失败");
      }
      if (res.code === 200) {
        Toast.clear();
        Toast("支付成功");
      }
    };
    onMounted(() => {
      getOrder();
    });

    return {
      loading,
      finished,
      ...toRefs(orderInfo),
      onLoad,
      payMoney,
      formatDate,
    };
  },
};
</script>

<style lang="scss" scoped>
.order {
  display: flex;
  flex-direction: column;
  .content-box {
    flex: 1;
    overflow: auto;
    .order-item {
      box-sizing: border-box;
      padding: 5px;
      box-shadow: 0px 0px 10px wheat;
      margin-top: 5px;
      .order-desc {
        font-size: 14px;
        li {
          line-height: 1.8;
          span {
            font-weight: bold;
          }
        }
      }
      .order-item-list {
        display: flex;
        justify-content: space-between;
        li {
          line-height: 1.8;
          border-bottom: 1px dashed #ccc;
          .left {
            font-weight: bold;
          }
          .right {
            color: aqua;
            font-weight: bold;
          }
          &.last-child {
            border: none;
          }
        }
      }
    }
  }
}
</style>
